<template>
	<view class="">
		<view class="goodsListIndex">
			<view @tap="GoGoods(item)" class="demo-warter" v-for="(item, index) in list" :key="index">
				<view class="imagess">
					<image :src="item.thumbnail+'?x-oss-process=image/resize,m_lfit,h_400,w_400'" mode="aspectFit"></image> 
					<p class="one">
						<image src="../../static/image/minilocation.png" mode=""></image>
						 距您 {{item.distance}}
					</p>
				</view>
					<view class="p20">
					<p class="two text-df">
						{{item.name}}
					</p>
					<view class="bottom">
						¥ <span class="text-xl">{{item.price}}</span> <span class="num text-sm"> 已售 {{item.sales}} 件</span>
					</view>
				</view>
			</view>
		</view>
		<view v-if="list == '' " class="  dataNone">
			<image src="../../static/image/shangpin@2x.png" mode=""></image>
			<p>暂无商品</p>
		</view>
	</view>
</template>
<script>
	export default {
		props: ['url', 'keyword', 'goodsType', 'id'],
		data() {
			return {
				list: [], 
				pageNumber: 1,
				pageSize: 8,
				stops: 0,
				noShake: 0,
			}
		},
		created() {
			if (this.keyword == false) {
				this.keyword = ''
			}
		},
		methods: {
			checking() {
				if (this.stops == 0 && this.noShake == 0) {
					this.noShake = 1
					this.init()
				}
			},
			inits() {
				this.list = []
				this.pageNumber = 1
				this.stops = 0
				this.noShake = 0
				this.init()
			},
			init() {
				let token = uni.getStorageSync('token')
				let paramer = {
					pageable: {
						pageNumber: this.pageNumber,
						pageSize: this.pageSize
					},
					longitude: this.$store.state.longitude,
					latitude: this.$store.state.latitude,
					keyword: this.keyword,
				}
				if (this.goodsType == 1) {
					paramer.categoryId = uni.getStorageSync('categoryId')
				}
				if (this.goodsType == 2) {
					paramer.orderField = uni.getStorageSync('orderField')
					paramer.orderType = uni.getStorageSync('orderType')
				}
				if (this.goodsType == 3) {
					paramer.isShow = false
				}
				if (this.id) {
					paramer.id = this.id
				}
				uni.request({
					header: {
						token: token
					},
					method: 'POST',
					url: this.url,
					data: paramer,
					success: (res) => {
						let data = res.data.data
						if (data.length != this.pageSize) {
							this.stops = 1
						}
						this.pageNumber = this.pageNumber + 1
						this.list = [...this.list, ...data]
						// uni.setStorageSync('goodsDatas', data)
						// this.addRandomData()
						this.noShake = 0
					}
				})
				uni.stopPullDownRefresh()
			},
			GoGoods(item) {
				this.$navigateTo('../GoodsDetails/GoodsDetails?id=' + item.id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goodsListIndex {
		display: flex;
		flex-wrap: wrap;
	}

	.demo-warter {
		width: 350rpx;
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		// position: relative;
		padding-bottom: 22rpx;
	}

	.imagess {
		width: 100%;
		height: 350rpx;
		position: relative;
		overflow: hidden;
		image{
			width: 100%;
			height: 350rpx; 
		}
		p{
			position: absolute;
			left: 0;
			bottom: 0; 
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 22rpx;
			background: #000000;
			opacity: 0.5;
			border-radius: 20px;
			color: #FFFFFF;
			font-size: 20rpx;
			image{
				width: 16rpx;
				height: 20rpx;
				margin-right: 8rpx;
				margin-top: -4rpx;
			}
		}
	}

	 
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(26, 26, 26, 1);
		margin-top: 5px;
		// color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		// background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		// border: 1px solid $u-type-primary;
		// color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(246, 82, 16, 1);
		margin-top: 5px;

		span {
			font-size: 24rpx;
		}
	}

	.demo-shop {
		overflow: hidden;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);

		.fl {
			width: 180rpx;
		}

		image {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			margin-right: 6rpx;
		}

		margin-top: 5px;
	}

	img {
		width: 100%;
		height: 345rpx;
		border-radius: 10rpx 10rpx 0px 0px;
	}

	p {
		margin-top: 18rpx;
		// margin-bottom: 36rpx;
		color: #282828;
	}

	.bottom {
		margin-top: 14rpx;
		color: #FF3F3E;

		.num {
			color: #7F7F7F;
		}

		span {
			margin-right: 10rpx;
		}
	}

	.text-df {
		font-size: 28rpx;
	}

	.text-lg {
		font-size: 32rpx;
	}
</style>
